<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <title>【一听就懂】C语言函数精讲!30分钟带你攻克C语言重难点,轻松玩转形参实参</title>
</head>
<body>
    <style>
        div{
            width: 1000px;
            height: 900px;
            margin: 0 220px;
            margin-top: 30px ;
        }
        iframe{
            margin-top: 20px;
            width: 1000px;
            height: 550px;
        }
        .name{
            font-size: 1.5rem;
        }
        .xuanji{
            height: 540px;
            width: 100px;
            position: absolute;
            right: 70px;
            top: 95px;
            /* background-color: red; */
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            border: 1px solid;
            background-color: rgb(218, 218, 218);
            -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;
        }
        .xuanji>div{
            width: 80px;
            height: 40px;
            /* background-color: aqua; */
            margin: 10px;
            border-radius: 10px;
            /* border: 1px solid; */
            -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;
        }
        .xuanji>div{
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .xuanji>div:hover{
            background-color: rgb(94, 129, 198);
        }
        .xuanzhong{
            background-color: rgb(94, 129, 198);
        }
    </style>
</html>
<div>
    <span class="name">【一听就懂】C语言函数精讲!30分钟带你攻克C语言重难点,轻松玩转形参实参</span><br>
    <span class="year"> 2022年11月22日</span>
    <iframe src =  "https://player.bilibili.com/player.html?isOutside=true&aid=817944829&bvid=BV1qG4y1V7hv&cid=899585357&p=1",
    height="100%" width="100%" scrolling="no" allowfullscreen="true" frameborder="no" allowtransparency="yes"></iframe>
    <div class="xuanji">
        <div class="xuanzhong">第一集</div>

    </div>
    
</div>



<script>

    let xuanji = [
    "https://player.bilibili.com/player.html?isOutside=true&aid=817944829&bvid=BV1qG4y1V7hv&cid=899585357&p=1",

    ];
    
    let bofang = document.querySelector("iframe");
    let dizhi ;
    for(i = 0 ; i < xuanji.length ; i ++){
        let index = i;
        document.querySelector(`.xuanji>div:nth-child(${i+1})`).addEventListener('click',function(){
            bofang.src = xuanji[index]
            document.querySelector('.xuanzhong').classList.remove('xuanzhong')
            this.classList.add('xuanzhong')
        })
        
    }

    

</script>
</body>
</html>